<template>
  <div class="container">
    <!-- 添加顶部标题栏 -->
    <div class="header">
      <div class="title">智能问答</div>
      <div class="actions">
        <span class="icon">⏱</span>
        <span class="icon">+</span>
        <span class="icon">×</span>
      </div>
    </div>

    <!-- 添加推荐问题组件 -->
      <RecommendQuestions 
      v-if="msgList.length === 0" 
      @select-question="handleQuestionSelect"
    />

    <!-- 保持原有消息列表结构 -->
    <div class="msg" ref="listEl">
      <!-- 显示历史消息, 包含之前的提问者(角色是user) 和 回复者(角色是system) 消息 -->
      <Msg v-for="(msg, index) in msgList" :role="msg.role" :content="msg.content" :key="index"></Msg>
      <!-- 显示当前打字机回复者(角色是assistant) 的消息, 只有 streaming 为 true 时才显示, 
        并且当 streaming 为 false 时, 上边的 Msg 会将整个 msgList 列表都显示出来, 并且 msgList 包含最底下那条回复内容 -->
      <Msg v-if="streaming" role="assistant" :content="streamingText" :streaming="true"></Msg>
    </div>

    <!-- 修改输入区域样式 -->
    <div class="input-bottom">
      <!-- 添加深度思考标签 -->
      <div class="deep-thinking">
        <img src="../assets/deep_mind.png" alt="深度思考">
        <span>深度思考 (R1)</span>
      </div>
      <InputDiv v-model:value="inputValue" @submit="handleSubmit"></InputDiv>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, nextTick, watch } from 'vue'
import InputDiv from '../components/InputDiv.vue'
import Msg from '../components/Msg.vue'
import RecommendQuestions from '../components/RecommendQuestions.vue'
import { useScroll } from '@vueuse/core'
import { useGpt } from '../hooks/useGpt'
import config from '../config'
interface Msg {
  role: string
  content: string
}
const inputValue = ref('')
const { msgList, streaming, streamingText, stream } = useGpt(config.key, true)
const listEl = ref()
const { y } = useScroll(listEl)
const scrollToBottom = () => {
  nextTick(() => {
    y.value = listEl.value?.scrollHeight || 0
  })
}
// 添加问题选择处理函数
const handleQuestionSelect = (question: string) => {
  inputValue.value = question
  // handleSubmit(question)
}

const handleSubmit = (content: string) => {
  if (content === '') return
  console.log('当前消息列表:', JSON.stringify(msgList.value));
  stream(content)
}

watch(streaming, (val) => {
  //每次发送消息只打印两次, 
  //streaming.value 为 true 打印  : watch streaming 消息列表更新: true [{"role":"user","content":"qwe"}]
  //streaming.value 为 false 打印 : watch streaming 消息列表更新: false [{"role":"user","content":"qwe"},{"role":"system","content":"这是对 \"qwe\" 的模拟回复。这是一个测试服务器。"}]
  console.log('watch streaming 消息列表更新:', streaming.value + " " + JSON.stringify(msgList.value)); 
  scrollToBottom()
})

watch(streamingText, (val) => {
  if (val) {
    //逐步流式打印 
    //因为 streamingText 是 ref对象, 直接打印会报循环引用错误, 所以要打印 streamingText.value
    //"\r\n"  "\r\n##"  
    //"\r\n#### js 调用"  "\r\n#### js 调用 java 方法"
    console.log('watch streamingText = ', JSON.stringify(streamingText.value));

    //打印的是历史消息 :
    //消息列表更新: [
    // {"role":"user","content":"hello"},
    // {"role":"system","content":"这是对 \"hello\" 的模拟回复。这是一个测试服务器。"},
    // {"role":"user","content":"不错"}
    //]
    console.log('watch streamingText 消息列表更新:', JSON.stringify(msgList.value)); 
    scrollToBottom()
  }
})
</script>

<style lang="scss" scoped>
.container {
  // 使用 100vh 防止 .container 没有高度充满屏幕, 因为不设置 html 和 body 为 100% 的高度,
  // 只设置 .container 的高度为 100% 不好使
  // vh是CSS中的视口高度单位（viewport height），1vh等于视口高度的1%。例如，100vh表示整个视口的高度。
  // 设置容器的height为100vh只是将该容器的高度设置为视口高度的100%，这本身并不会直接影响html和body元素的高度。
  // 但是由于浏览器的默认行为，当子元素（容器）的高度被设置为100vh时，浏览器会自动调整html和body元素的高度以适应这个高度需求，使它们扩展到视口高度。这是浏览器为了确保页面布局正确而采取的自动行为。
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f7f8fa;
  position: relative;

  .msg {
    width: 100%;
    flex: 1;
    /*
      overflow-y: auto; 是 CSS 属性，用于控制元素在垂直方向（y轴）上内容溢出时的行为：

      1. overflow-y 专门控制垂直方向的溢出
      2. auto 值表示：
        - 当内容高度超过容器高度时，自动显示滚动条
        - 当内容高度不超过容器高度时，不显示滚动条
    */
    overflow-y: auto;
    padding: 20px;
    padding-bottom: 100px; // 防止底部 input 组件盖住内容
    // 隐藏滚动条
    &::-webkit-scrollbar {
      display: none;
    }
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }

  .input-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    min-height: 50px;
    background: white;
    color: black;
    padding: 15px;
    border-top: 1px solid #eee;
    z-index: 10;
    display: flex;
    flex-direction: column;

    .bottom-bar {
      display: flex;
      justify-content: space-between;
      padding: 10px 40px 0;

      button {
        background: none;
        border: none;
        cursor: pointer;
        font-size: 20px;
        color: #666;

        &:hover {
          color: #333;
        }
      }
    }
  }
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background: white;
  color: white;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);

  .title {
    font-size: 18px;
    font-weight: bold;
    color: black;
  }

  .actions {
    display: flex;
    gap: 15px;

    .icon {
      cursor: pointer;
    }
  }
}

.deep-thinking {
  // display: flex 的默认方向（ flex-direction ）是横向的，即 flex-direction: row
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  
  img {
    width: 20px;
    height: 20px;
    margin-right: 8px;
  }
  
  span {
    color: #333;
    font-size: 14px;
    font-weight: 500;
  }
}
</style>